import { Input, Switch } from 'antd'

import style from './style.module.scss'

const { TextArea } = Input

const Banner = (props) => {
  const { attributes = {}, changeAttributes } = props
  const {
    title,
    description,
    showSmallPic,
    smallPicUrl,
    backgroundUrl,
    backgroundHeight
  } = attributes
  const handleSmallPicChange = (checked) => {
    if (!checked) {
      changeAttributes({ showSmallPic: checked, smallPicUrl: '' })
    } else {
      changeAttributes({ showSmallPic: checked })
    }
  }
  return (
    <div className={style.wrapper}>
      <div className={style.row}>
        <span className={style.label}>页面标题</span>
        <Input
          value={title}
          onChange={(e) => changeAttributes({ title: e.target.value })}
          className={style.content}
          placeholder="请输入页面标题"
        />
      </div>
      <div className={style.row}>
        <span className={style.label}>页面描述</span>
        <TextArea
          value={description}
          onChange={(e) => changeAttributes({ description: e.target.value })}
          className={style.content}
          rows={2}
          placeholder="请输入页面描述"
        />
      </div>
      <div className={style.row}>
        <span className={style.label}>展示小图</span>
        <Switch checked={showSmallPic} onChange={handleSmallPicChange} />
      </div>
      {showSmallPic ? (
        <div className={style.row}>
          <span className={style.label}>小图链接</span>
          <Input
            value={smallPicUrl}
            onChange={(e) => changeAttributes({ smallPicUrl: e.target.value })}
            className={style.content}
            placeholder="请输入小图片的 URL 地址"
          />
        </div>
      ) : null}
      <div className={style.row}>
        <span className={style.label}>背景链接</span>
        <Input
          value={backgroundUrl}
          onChange={(e) => changeAttributes({ backgroundUrl: e.target.value })}
          className={style.content}
          placeholder="请输入背景的 URL 地址"
        />
      </div>
      <div className={style.row}>
        <span className={style.label}>背景高度</span>
        <Input
          value={backgroundHeight}
          onChange={(e) =>
            changeAttributes({ backgroundHeight: e.target.value })
          }
          className={style.content}
          placeholder="请输入背景高度的像素值"
        />
      </div>
    </div>
  )
}

export default Banner
